<script setup lang="ts">
//  v-model指令 其实是  :value + @input
// 在vue2中 组件上要使用 v-model 
// 1. 子组件接收的数据是 value
// 2. 子组件发布的自定义事件 必须是 input
// 3. 父组件才可以写  v-model

// 在vue3中 组件上使用v-model 有一些变化
// 1. 子组件接收的数据是 modelValue 在组件上 v-model="数据" 完整写法是 v-model:modelValue="属性"
// 2. 子组件发布的自定义事件 update:modelValue
// 3. 父组件才可以写 v-model
import { ref } from 'vue'
import Jerry from './Jerry.vue'
const money = ref(100)
const changeMoney = (val: number) => {
  money.value = val
}
</script>
<template>
  <div style="border: 2px solid #ccc; padding: 20px; margin: 20px">
    <!-- <Jerry :value="money" @input="changeMoney"></Jerry> -->
    <Jerry v-model="money"></Jerry>
    <!-- vue3中组件上使用 v-model="属性"(简写) ====>完整写法 v-model:modelValue="属性" -->

    <!-- 子组件势必接收的是modelValue  
         子组件发布的自定义事件  update:modelValue
    -->
  </div>
</template>



<style scoped>
</style>